<template>
  <Basic
    title="驳回请求"
    :show-dialog="showRejectedDialog"
    @cancel="handleCancel"
    @confirm="handleConfirmDialog"
  >
    <div class="pt-2">
      <van-field
        v-model="jiedao"
        is-link
        readonly
        required
        name="jiedao"
        clearable
        label="街道办"
        placeholder="是否属于街道办"
        input-align="right"
        @click="jiedaoFlag = true"
      />
      <van-popup v-model:show="jiedaoFlag" position="bottom" teleport="body">
        <van-picker
          :columns="jiedaoban"
          value-key="label"
          @confirm="jiedaoConfirm"
          @cancel="jiedaoFlag = false"
        />
      </van-popup>
      <template v-if="isFlag">
        <van-field
          v-model="community_label"
          is-link
          readonly
          required
          name="community_id"
          clearable
          label="社区"
          placeholder="社区"
          input-align="right"
          @click="showCommunityPicker = true"
        />
        <van-popup v-model:show="showCommunityPicker" position="bottom">
          <van-search v-model="search" placeholder="请输入搜索关键词"  @update:model-value="onSearch" />
          <van-picker
            ref="picker"
            :columns="communityListRef"
            value-key="name"
            @confirm="onCommunityConfirm"
            @cancel="showCommunityPicker = false"
          />
        </van-popup>
        <van-field
          v-model="mch_label"
          is-link
          readonly
          required
          name="mch_id"
          label="小区"
          placeholder="小区"
          input-align="right"
          @click="handleSelectChild"
        />
        <van-popup v-model:show="showCommunityChildPicker" position="bottom">
          <van-search v-model="search1" placeholder="请输入搜索关键词"  @update:model-value="onSearch1" />
          <van-picker
          ref="picker1"
            :columns="communityChildListRef"
            value-key="name"
            @confirm="onCommunityChildConfirm"
            @cancel="showCommunityChildPicker = false"
          />
        </van-popup>
      </template>

      <van-field
        v-model="remark"
        required
        type="textarea"
        name="remark"
        label="驳回原因"
        placeholder="驳回原因"
        rows="2"
        maxlength="20"
        show-word-limit
        label-width="80"
        :rules="[{ required: true, message: '请输入驳回原因' }]"
      />
    </div>
  </Basic>
</template>

<script lang="ts">
  import { computed, defineComponent, ref, onMounted } from 'vue'
  import { usePersonStore } from '@/store/person'
  import { useHomeStore } from '@/store/home'
  import Basic from './Basic.vue'
  import { Toast } from 'vant'
  import { IdName, IdLabel } from '@/types/global'

  export default defineComponent({
    name: 'Rejected',
    components: {
      Basic
    },
    props: {
      person: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const picker = ref();
      const picker1 = ref();
      const search = ref('')
      const search1 = ref('')
      const store = usePersonStore()
      const homeStore = useHomeStore()
      const person = computed(() => props.person)
      const showRejectedDialog = computed(() => {
        if (!person.value) return false
        return store.showRejectedDialog
      })

      const handleSelectChild = () => {
        if (communityChildListRef.value.length === 0) return Toast.fail('请先选择社区')
        showCommunityChildPicker.value = true
      }

      const communityListRef = ref<IdName[]>([])
      const communityChildListRef = ref<IdName[]>([])
      const community_label = ref('')
      const mch_label = ref('')
      const remark = ref('')
      const jiedao = ref('')
      const isFlag = ref(false)
      const showCommunityPicker = ref(false)
      const showCommunityChildPicker = ref(false)
      const jiedaoFlag = ref(false)
      const jiedaoban = ref([
        { id: 1, label: '属于街道办' },
        { id: 0, label: '不属于街道办' }
      ])

      const jiedaoConfirm = (data: IdLabel) => {
        const { id, label } = data
        jiedao.value = label
        if (parseInt(id) === 1) {
          isFlag.value = true
        } else {
          isFlag.value = false
        }

        jiedaoFlag.value = false
      }

      const handleCancel = () => {
        store.setShowRejectedDialog(false)
      }

      const handleConfirmDialog = async () => {
        if (!jiedao.value) return Toast.fail('请选择是否属于街道办')
        if (isFlag.value) {
          if (jiedao.value && (!community_label.value || !mch_label.value)) {
            Toast.fail('请选择对应的社区或小区')
            return
          }
        }
        if (!remark.value) return Toast.fail('请输入驳回原因')
        let remarkTj = `${props.person.community_name} ${props.person.mch_name} ${remark.value}`
        if (isFlag.value) {
          remarkTj = `${props.person.community_name} ${props.person.mch_name} ${remark.value}`
        } else {
          remarkTj = remark.value
        }
        const { code, data } = (await store.rejectPerson(
          { remark: remarkTj },
          props.person.id
        )) as any
        if (code === 200) {
          store.setShowRejectedDialog(false)
          emit('success', data)
        }
      }

      const getCommList = async () => {
        let result: IdName[] = await homeStore.getCommunityList()
        communityListRef.value = result
      }

      const onCommunityConfirm = async (data: IdName) => {
        const { id, name } = data
        community_label.value = name
        await getCommChildList(id)
        showCommunityPicker.value = false
      }

      const onCommunityChildConfirm = async (data: IdName) =>{
        const { name } = data
        mch_label.value = name
        showCommunityChildPicker.value = false
      }

      const getCommChildList = async (id: string) => {
        let result: IdName[] = await homeStore.getCommunityChildListById(id)
        communityChildListRef.value = result
      }

      onMounted(async () => {
        await getCommList()
      })


      const onSearch = (value: any) => {
        // 过滤结果
        let filter = communityListRef.value.filter((item) => {
          return item.name.indexOf(value) >= 0
        })
        picker.value.setColumnValues(0, filter)

      }

      const onSearch1 = (value: any) => {
        let filter = communityChildListRef.value.filter((item) => {
          return item.name.indexOf(value) >= 0
        })
        picker1.value.setColumnValues(0, filter)

      }

      return {
        picker,
        picker1,
        search,
        onSearch,
        search1,
        onSearch1,
        showRejectedDialog,
        remark,
        handleCancel,
        communityListRef,
        handleConfirmDialog,
        showCommunityPicker,
        showCommunityChildPicker,
        onCommunityChildConfirm,
        communityChildListRef,
        handleSelectChild,
        onCommunityConfirm,
        community_label,
        mch_label,
        isFlag,
        jiedao,
        jiedaoban,
        jiedaoConfirm,
        jiedaoFlag,
        getCommChildList
      }
    }
  })
</script>
